<div class="col-sm-12 col-lg-6">
  <form name="rbdForm"
        class="form-horizontal"
        #formDir="ngForm"
        [formGroup]="rbdForm"
        novalidate>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <span i18n>{mode, select, editing {Edit} cloning {Clone} copying {Copy} other {Add}}</span> RBD
        </h3>
      </div>
      <div class="panel-body">

        <!-- Parent -->
        <div class="form-group"
             *ngIf="rbdForm.getValue('parent')">
          <label i18n
                 class="control-label col-sm-3"
                 for="name">{mode, select, cloning {Clone from} copying {Copy from} other {Parent}}</label>
          <div class="col-sm-9">
            <input class="form-control"
                   type="text"
                   id="parent"
                   name="parent"
                   formControlName="parent">
            <hr>
          </div>
        </div>

        <!-- Name -->
        <div class="form-group"
             [ngClass]="{'has-error': rbdForm.showError('name', formDir)}">
          <label class="control-label col-sm-3"
                 for="name">
            <ng-container i18n>Name</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <input class="form-control"
                   type="text"
                   placeholder="Name..."
                   id="name"
                   name="name"
                   formControlName="name"
                   autofocus>
            <span class="help-block"
                  *ngIf="rbdForm.showError('name', formDir, 'required')">
              <ng-container i18n>This field is required.</ng-container>
            </span>
          </div>
        </div>

        <!-- Pool -->
        <div class="form-group"
             [ngClass]="{'has-error': rbdForm.showError('pool', formDir)}"
             (change)="onPoolChange($event.target.value)">
          <label class="control-label col-sm-3"
                 for="pool">
            Pool
            <span class="required"
                  *ngIf="mode !== 'editing'"></span>
          </label>
          <div class="col-sm-9">
            <input class="form-control"
                   type="text"
                   placeholder="Pool name..."
                   id="pool"
                   name="pool"
                   formControlName="pool"
                   *ngIf="mode === 'editing' || !poolPermission.read">
            <select id="pool"
                    name="pool"
                    class="form-control"
                    formControlName="pool"
                    *ngIf="mode !== 'editing' && poolPermission.read">
              <option *ngIf="pools === null"
                      [ngValue]="null"
                      i18n>Loading...</option>
              <option *ngIf="pools !== null && pools.length === 0"
                      [ngValue]="null"
                      i18n>-- No rbd pools available --</option>
              <option *ngIf="pools !== null && pools.length > 0"
                      [ngValue]="null"
                      i18n>-- Select a pool --</option>
              <option *ngFor="let pool of pools"
                      [value]="pool.pool_name">{{ pool.pool_name }}</option>
            </select>
            <span *ngIf="rbdForm.showError('pool', formDir, 'required')"
                  class="help-block"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- Use a dedicated pool -->
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-9">
            <div class="checkbox checkbox-primary">
              <input type="checkbox"
                     id="useDataPool"
                     name="useDataPool"
                     formControlName="useDataPool"
                     (change)="onUseDataPoolChange()">
              <label i18n
                     for="useDataPool">Use a dedicated data pool</label>
            </div>
          </div>
        </div>

        <!-- Data Pool -->
        <div class="form-group"
             [ngClass]="{'has-error': rbdForm.showError('dataPool', formDir)}"
             *ngIf="rbdForm.getValue('useDataPool')">
          <label class="control-label col-sm-3"
                 for="dataPool">
            <ng-container i18n>Data pool</ng-container>
            <span class="required"
                  *ngIf="mode !== 'editing'"></span>
            <cd-helper i18n-html
                       html="Dedicated pool that stores the object-data of the RBD.">
            </cd-helper>
          </label>
          <div class="col-sm-9">
            <input class="form-control"
                   type="text"
                   placeholder="Data pool name..."
                   id="dataPool"
                   name="dataPool"
                   formControlName="dataPool"
                   *ngIf="mode === 'editing' || !poolPermission.read">
            <select id="dataPool"
                    name="dataPool"
                    class="form-control"
                    formControlName="dataPool"
                    (change)="onDataPoolChange($event.target.value)"
                    *ngIf="mode !== 'editing' && poolPermission.read">
              <option *ngIf="dataPools === null"
                      [ngValue]="null"
                      i18n>Loading...</option>
              <option *ngIf="dataPools !== null && dataPools.length === 0"
                      [ngValue]="null"
                      i18n>-- No data pools available --</option>
              <option *ngIf="dataPools !== null && dataPools.length > 0"
                      [ngValue]="null">-- Select a data pool --
              </option>
              <option *ngFor="let dataPool of dataPools"
                      [value]="dataPool.pool_name">{{ dataPool.pool_name }}</option>
            </select>
            <span class="help-block"
                  *ngIf="rbdForm.showError('dataPool', formDir, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- Size -->
        <div class="form-group"
             [ngClass]="{'has-error': rbdForm.showError('size', formDir)}">
          <label class="control-label col-sm-3"
                 for="size">
            <ng-container i18n>Size</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <input id="size"
                   name="size"
                   class="form-control"
                   type="text"
                   formControlName="size"
                   i18n-placeholder
                   placeholder="e.g., 10GiB"
                   defaultUnit="GiB"
                   cdDimlessBinary>
            <span class="help-block"
                  *ngIf="rbdForm.showError('size', formDir, 'required')"
                  i18n>This field is required.</span>
            <span class="help-block"
                  *ngIf="rbdForm.showError('size', formDir, 'invalidSizeObject')"
                  i18n>You have to increase the size.</span>
          </div>
        </div>

        <!-- Features -->
        <div class="form-group"
             [ngClass]="{'has-error': (formDir.submitted || featuresFormGroups.dirty) && featuresFormGroups.invalid}"
             formGroupName="features">
          <label i18n
                 class="col-sm-3 control-label"
                 for="features">Features</label>
          <div class="col-sm-9">
            <div class="checkbox checkbox-primary"
                 *ngFor="let feature of featuresList">
              <input type="checkbox"
                     id="{{ feature.key }}"
                     name="{{ feature.key }}"
                     formControlName="{{ feature.key }}">
              <label for="{{ feature.key }}">{{ feature.desc }}</label>
              <cd-helper *ngIf="feature.helperHtml"
                         html="{{ feature.helperHtml }}">
              </cd-helper>
            </div>
          </div>
        </div>

        <!-- Advanced -->
        <div class="row">
          <div class="col-sm-12">
            <a
               class="pull-right margin-right-md"
               (click)="advancedEnabled = true"
               *ngIf="!advancedEnabled"
               i18n>Advanced...</a>
          </div>
        </div>
        <div *ngIf="advancedEnabled">

          <h2 i18n
              class="page-header">Advanced</h2>

          <!-- Object Size -->
          <div class="form-group"
               [ngClass]="{'has-error': rbdForm.showError('obj_size', formDir)}">
            <label i18n
                   class="control-label col-sm-3"
                   for="size">Object size</label>
            <div class="col-sm-9">
              <select id="obj_size"
                      name="obj_size"
                      class="form-control"
                      formControlName="obj_size">
                <option *ngFor="let objectSize of objectSizes"
                        [value]="objectSize">{{ objectSize }}</option>
              </select>
            </div>
          </div>

          <!-- Strippe Unit -->
          <div class="form-group"
               [ngClass]="{'has-error': rbdForm.showError('stripingUnit', formDir)}">
            <label class="control-label col-sm-3"
                   for="stripingUnit">
              <span i18n>Stripe unit</span>
              <span class="required"
                    *ngIf="rbdForm.getValue('stripingCount')">
              </span>
            </label>
            <div class="col-sm-9">
              <select id="stripingUnit"
                      name="stripingUnit"
                      class="form-control"
                      formControlName="stripingUnit">
                <option i18n
                        [ngValue]="null">-- Select stripe unit --</option>
                <option *ngFor="let objectSize of objectSizes"
                        [value]="objectSize">{{ objectSize }}</option>
              </select>
              <span class="help-block"
                    *ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
                    i18n>This field is required because stripe count is defined!</span>
              <span class="help-block"
                    *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
                    i18n>Stripe unit is greater than object size.</span>
            </div>
          </div>

          <!-- Strippe Count -->
          <div class="form-group"
               [ngClass]="{'has-error': rbdForm.showError('stripingCount', formDir)}">
            <label class="control-label col-sm-3"
                   for="stripingCount">
              <span i18n>Stripe count</span>
              <span class="required"
                    *ngIf="rbdForm.getValue('stripingUnit')">
              </span>
            </label>
            <div class="col-sm-9">
              <input id="stripingCount"
                     name="stripingCount"
                     formControlName="stripingCount"
                     class="form-control"
                     type="number">
              <span class="help-block"
                    *ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
                    i18n>This field is required because stripe unit is defined!</span>
              <span class="help-block"
                    *ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
                    i18n>Stripe count must be greater than 0.</span>
            </div>
          </div>

        </div>

      </div>
      <div class="panel-footer">
        <div class="button-group text-right">
          <cd-submit-button [form]="formDir"
                            type="button"
                            (submitAction)="submit()">
            <span i18n>{mode, select, editing {Update} cloning {Clone} copying {Copy} other {Create}}</span> RBD
          </cd-submit-button>
          <button type="button"
                  class="btn btn-sm btn-default"
                  routerLink="/block/rbd"
                  i18n>Back</button>
        </div>
      </div>
    </div>
  </form>
</div>
